<template>
	<view class="refund-page">
		<view class="content">
			<view class="box flex" v-if="product">
				<image :src="product.product_image" class="thumb" />
				<view class="flex-1 flex align-start justify-between">
					<view class="skus">
						<text class="pName">{{product.product_name}}</text>
						<uv-gap height="5" bgColor="transparent" v-if="product.spec_values" />
						<view class="tags" v-if="product.spec_values">{{product.spec_values}}</view>
					</view>
					<view class="jiage">
						<view class="t1">￥{{product.price}}</view>
						<view class="t2">x{{product.cart_num}}</view>
					</view>
				</view>
			</view>

			<view class="box margin10">
				<view class="form-item">
					<text class="form-label">申请类型</text>
					<view class="form-input" @click="openType">
						<text class="placeholder" v-if="!selResult.type" style="color:#C9CACA;">点击选择</text>
						<text v-else>{{selResult.type}}</text>
						<uv-icon name="arrow-right" size="12" />
					</view>
				</view>

				<view class="form-item">
					<text class="form-label">收货状态</text>
					<view class="form-input" @click="openStatus">
						<text class="placeholder" v-if="!selResult.status" style="color:#C9CACA;">点击选择</text>
						<text v-else>{{selResult.status}}</text>
						<uv-icon name="arrow-right" size="12" />
					</view>
				</view>

				<view class="form-item">
					<text class="form-label">申请原因</text>
					<view class="form-input" @click="openReason">
						<text class="placeholder" v-if="!selResult.reason" style="color:#C9CACA;">点击选择申请原因</text>
						<text v-else>{{selResult.reason}}</text>
						<uv-icon name="arrow-right" size="12" />
					</view>
				</view>
			</view>
			<view class="box margin10" v-if="product.pay_price">
				<view class="money">
					<uv-text type="info" text="申请金额" size="12"></uv-text>
					<uv-text mode="price" :text="product.pay_price" bold size="16"
						customStyle="margin: 5px 0"></uv-text>
				</view>
			</view>
			<view class="box margin10">
				<uv-text text="请详细描述您遇到的问题，并上传图片为证，有助于更好地帮您处理退款" size="14"></uv-text>
				<uv-gap height="10" bgColor="transparent" />
				<uv-textarea v-model="model.refund_explain" placeholder="必填，请详细描述您遇到的问题" :maxlength="255" />
				<uv-gap height="10" bgColor="transparent" />
				<lst-upimg :type="4" :multiple="true" :maxCount="5" @success="e => upimgSuccess(e)">
					<view class="addImg">
						<uv-icon name="photo" color="#E7E7E7" size="60" />
						<text>添加图片</text>
					</view>
				</lst-upimg>
			</view>
			<view class="box margin10">
				<view class="flex">
					<uv-text text="联系电话" size="12" block customStyle="color:#979797;width:70px;" />
					<uv-input v-model="model.phone" border="none" placeholder="请输入联系电话" />
				</view>
			</view>
		</view>
		<view class="footer-btn">
			<button type="button" class="btn_sure" @click="doSubmit">提交申请</button>
		</view>
	</view>



	<uv-popup ref="popTypeRef" mode="bottom" round="10" closeable>
		<selpicker :title="apply_title" :options="apply_list" :selectedOption="model.apply_for_type"
			@change="changeType">
		</selpicker>
	</uv-popup>

	<uv-popup ref="popStatusRef" mode="bottom" round="10" closeable>
		<selpicker :title="status_title" :options="status_list" :selectedOption="model.receipt_status"
			@change="changeStatus">
		</selpicker>
	</uv-popup>

	<uv-popup ref="popReasonRef" mode="bottom" round="10" closeable>
		<selpicker :title="reason_title" :options="reason_list" :selectedOption="model.apply_for_reason_id"
			@change="changeReason">
		</selpicker>
	</uv-popup>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted,
		onBeforeUnmount
	} from 'vue'
	import selpicker from './components/select_list.vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		getReason,
		addMarketAfterSales
	} from '@/api'
	import {
		useRefreshStore,
		userefundStore
	} from '@/store'
	const refreshStore = useRefreshStore()
	const refund = userefundStore()
	const product = ref({})
	const apply_title = ref('请选择申请类型')
	const status_title = ref('请选择货物状态')
	const reason_title = ref('请选择申请原因')
	const apply_list = ref([{
		id: 1,
		name: '我要退货退款'
	}, {
		id: 2,
		name: '我要退款(无需退货)'
	}])
	const status_list = ref([{
		id: 1,
		name: '未收到货'
	}, {
		id: 2,
		name: '已收到货'
	}])
	const formRef = ref(null)
	const reason_list = ref([])
	const popTypeRef = ref(null)
	const popStatusRef = ref(null)
	const popReasonRef = ref(null)
	const listImage = ref([]);
	const selResult = reactive({
		type: '',
		status: '',
		reason: ''
	})
	const openType = () => {
		popTypeRef.value.open()
	}
	const changeType = (e) => {
		model.apply_for_type = e.id
		selResult.type = e.name
		popTypeRef.value.close()
	}
	const openStatus = () => {
		popStatusRef.value.open()
	}
	const changeStatus = (e) => {
		model.receipt_status = e.id
		selResult.status = e.name
		popStatusRef.value.close()
	}
	const openReason = () => {
		popReasonRef.value.open()
	}
	const changeReason = (e) => {
		model.apply_for_reason_id = e.id
		selResult.reason = e.name
		popReasonRef.value.close()
	}
	onMounted(() => {
		// 从 Pinia 获取订单数据
		product.value = refund.refundData
		model.order_info_id = product.value.id
		//console.log(product.value)
	})
	onBeforeUnmount(() => {
		// 使用后可以清除数据
		refund.clearRefundData()
	})
	const model = reactive({
		order_info_id: '',
		apply_for_type: '',
		receipt_status: '',
		apply_for_reason_id: '',
		refund_explain: '',
		refund_img: [],
		phone: ''
	})

	const upimgSuccess = (fileList) => {
		listImage.value = fileList
	}

	onLoad(async (option) => {
		reason_list.value = (await getReason()).result
		console.log(reason_list.value)
	})

	const doSubmit = async () => {
		if (!model.apply_for_type) return uni.$uv.toast('请选择申请类型')
		if (!model.receipt_status) return uni.$uv.toast('请选择货物状态')
		if (!model.apply_for_reason_id) return uni.$uv.toast('请选择申请原因')
		if (!model.refund_explain) return uni.$uv.toast('请详细描述您遇到的问题')
		if (!model.phone) return uni.$uv.toast('请输入联系电话')
		model.refund_img = listImage.value.map(({
			src
		}) => src);
		const res = await addMarketAfterSales(model)
		if (res.code == 200) {
			refreshStore.setRefresh(true)
			uni.navigateTo({
				url: '/pages-home/market/refund_result'
			})
		} else {
			uni.$uv.toast(res.msg)
		}
	}
</script>

<style lang="scss" scoped>
	.popup-content {
		padding: 30upx 0;

		.but {
			margin: 0 30upx;
		}
	}

	.padding2 {
		padding: 0 30upx;
	}

	.refund-page {
		background-color: #f7f7f7;
		min-height: 100vh;
		padding-bottom: 80px;
	}

	.margin10 {
		margin: 10px 0;
	}

	.margin20 {
		margin-left: 20upx;
		margin-right: 20upx;
	}

	.thumb {
		width: 120upx;
		height: 120upx;
		border-radius: 6upx;
		margin-right: 20upx;
		margin-bottom: 20upx;
	}

	.skus {
		.pName {
			font-size: 26upx;
			color: #333;
		}

		.tags {
			background: #F2F2F2;
			color: #333;
			display: inline-flex;
			border-radius: 6upx;
			font-size: 24upx;
			padding: 4upx 15upx;
		}
	}

	.content {
		padding: 20upx;

		.box {
			padding: 20upx;
			border-radius: 20upx;
			background-color: #fff;

			.tags {
				display: inline-flex;
			}
		}

		.form-item {
			display: flex;
			align-items: center;
			padding: 20upx 0;
			border-bottom: 1upx solid #f5f5f5;

			&:last-child {
				border-bottom: none;
			}
		}

		.form-label {
			font-size: 28upx;
			margin-right: 20upx;
			color:#979797;
			width:140upx;
		}

		.form-input {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 28upx;
			padding: 10upx 0;
		}

		.placeholder {
			color: #C9CACA;
		}
	}

	.order-info {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 10px 0;

		.lbl_info {
			width: 80px;
			font-size: 24upx;
		}

		.content_info {
			flex: 1;
			text-align: right;
			font-size: 24upx;
			color: #ff4d4f;
		}

		.money {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin: 10px 0;
		}
	}

	.addImg {
		display: flex;
		width: 200upx;
		height: 200upx;
		border-radius: 20upx;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		background-color: #F0F0F0;

		text {
			color: #C8C8C8;
			font-size: 28upx;
		}
	}


	.remark-section {
		margin: 10px;
		background-color: #fff;
		border-radius: 8px;
	}

	.footer-btn {
		position: fixed;
		background-color: #fff;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 15px;
		display: flex;
		justify-content: center;
		align-items: center;

		.btn_sure {
			display: flex;
			flex: 1;
			justify-content: center;
			align-items: center;
			height: 80upx;
			line-height: 80upx;
			border-radius: 40upx;
			background-color: #DE3F27;
			color: #fff;
			font-size: 28upx;
		}
	}
</style>